<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div {
        width: 500px;
        height: 300px;
        border: black 1px solid;
        border-radius: 50px 50px 50px 50px;
    }
    
    .yuan {
        width: 50px;
        height: 50px;
        border: 1px black solid;
        border-radius: 25px 25px 25px 25px;
        text-align: center;
        position: relative;
        margin-top: 120px;
        float: left;
    }
    
    div {
        margin: 0 auto;
    }
</style>

<body>
    <div class="div">
        <div class="yuan" style="margin-left:130px;"></div>
        <div class="yuan" style="position:relative;margin-left:25px;"></div>
        <div class="yuan" style="position:relative;margin-left:25px;"></div>
        <div class="yuan" style="position:relative;margin-left:25px; float: left; line-height: 50px;"></div>
    </div>
    <script>
        var divs = document.querySelectorAll('.yuan');
        var flag = 35;
        // 初始化默认开始为绿灯， 时间是35s
        divs[2].style.backgroundColor = 'green';
        divs[3].innerHTML = flag;

        function green() {
            var flag = 35;
            divs[2].style.backgroundColor = 'green'
            setInterval(function() {
                flag--;
                divs[3].innerHTML = flag;
                if (flag == 0) {
                    divs[2].style.backgroundColor = '';
                    return yellow();
                }
            }, 1000)
        }

        function yellow() {
            var flag = 5;
            divs[0].style.backgroundColor = '';
            divs[1].style.backgroundColor = 'yellow';
            divs[2].style.backgroundColor = '';
            setInterval(function() {
                flag--;
                divs[3].innerHTML = flag;
                if (flag == 0) {
                    divs[1].style.backgroundColor = '';
                    return red();
                }
            }, 1000)
        }

        function red() {
            var flag = 30;
            divs[0].style.backgroundColor = 'red';
            divs[1].style.backgroundColor = '';
            divs[2].style.backgroundColor = '';
            setInterval(function() {
                flag--;
                divs[3].innerHTML = flag;
                if (flag == 0) {
                    divs[0].style.backgroundColor = '';
                    return green();
                }
            }, 1000)
        }
        green()
    </script>
</body>

</html>